<!DOCTYPE html>
<html lang="zh-cn">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <title>模版 | Hexo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Canonical links -->
  <link rel="canonical" href="https://hexo.io/zh-cn/docs/templates.html">
  <!-- Alternative links -->
  
    
      <link rel="alternative" hreflang="en" href="https://hexo.io/docs/templates.html">
    
      <link rel="alternative" hreflang="zh-tw" href="https://hexo.io/zh-tw/docs/templates.html">
    
      <link rel="alternative" hreflang="zh-cn" href="https://hexo.io/zh-cn/docs/templates.html">
    
      <link rel="alternative" hreflang="ru" href="https://hexo.io/ru/docs/templates.html">
    
      <link rel="alternative" hreflang="ko" href="https://hexo.io/ko/docs/templates.html">
    
  
  <!-- Icon -->
  <link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152x152.png">
  <link rel="icon" type="image/png" href="/icon/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="/icon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/icon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/icon/favicon-32x32.png" sizes="32x32">
  <meta name="msapplication-TileColor" content="#2f83cd">
  <meta name="msapplication-TileImage" content="/icon/mstile-144x144.png">
  <!-- CSS -->
  <!-- build:css build/css/navy.css -->
  <link rel="stylesheet" href="/css/navy.css">
  <!-- endbuild -->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css">
  <!-- RSS -->
  <link rel="alternate" href="/atom.xml" title="Hexo">
  <!-- Open Graph -->
  <meta name="description" content="模板决定了网站内容的呈现方式，每个主题至少都应包含一个 index 模板，以下是各页面相对应的模板名称：    模板 用途 回调     index 首页    post 文章 index   page 分页 index   archive 归档 index   category 分类归档 archive   tag 标签归档 archive    布局（Layout）如果页面结构类似，例如两个模">
<meta property="og:type" content="website">
<meta property="og:title" content="模版">
<meta property="og:url" content="https://hexo.io/zh-cn/docs/templates.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="模板决定了网站内容的呈现方式，每个主题至少都应包含一个 index 模板，以下是各页面相对应的模板名称：    模板 用途 回调     index 首页    post 文章 index   page 分页 index   archive 归档 index   category 分类归档 archive   tag 标签归档 archive    布局（Layout）如果页面结构类似，例如两个模">
<meta property="og:locale" content="zh-cn">
<meta property="og:updated_time" content="2017-12-06T21:52:16.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="模版">
<meta name="twitter:description" content="模板决定了网站内容的呈现方式，每个主题至少都应包含一个 index 模板，以下是各页面相对应的模板名称：    模板 用途 回调     index 首页    post 文章 index   page 分页 index   archive 归档 index   category 分类归档 archive   tag 标签归档 archive    布局（Layout）如果页面结构类似，例如两个模">
<meta name="twitter:site" content="hexojs">
<meta property="fb:admins" content="100000247608790">
  <!-- Google Analytics -->
  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-48498357-3', 'auto');
  ga('send', 'pageview');
</script>

</head>

<body>
  <div id="container">
    <header id="header" class="wrapper">
  <div id="header-inner" class="inner">
    <h1 id="logo-wrap">
      <a href="/zh-cn/" id="logo">Hexo</a>
    </h1>
    <nav id="main-nav">
      <a href="/zh-cn/docs/" class="main-nav-link">文档</a><a href="/zh-cn/api/" class="main-nav-link">API</a><a href="/news/" class="main-nav-link">新闻</a><a href="/plugins/" class="main-nav-link">插件</a><a href="/themes/" class="main-nav-link">主题</a>
      <a href="https://github.com/hexojs/hexo" class="main-nav-link"><i class="fa fa-github-alt"></i></a>
      <div id="search-input-wrap">
        <div id="search-input-icon">
          <i class="fa fa-search"></i>
        </div>
        <input type="search" id="search-input" placeholder="Search...">
      </div>
    </nav>
    <div id="lang-select-wrap">
      <label id="lang-select-label"><i class="fa fa-globe"></i><span>简体中文</span></label>
      <select id="lang-select" data-canonical="docs/templates.html">
        
          <option value="en">English</option>
        
          <option value="zh-tw">正體中文</option>
        
          <option value="zh-cn" selected>简体中文</option>
        
          <option value="ru">Русский</option>
        
          <option value="ko">한국어</option>
        
      </select>
    </div>
    <a id="mobile-nav-toggle">
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
    </a>
  </div>
</header>

    <div id="content-wrap">
  <div id="content" class="wrapper">
    <div id="content-inner">
      <article class="article-container" itemscope itemtype="http://schema.org/Article">
        <div class="article-inner">
          <div class="article">
            <div class="inner">
              <header class="article-header">
                <h1 class="article-title" itemprop="name">模版</h1>
                <a href="https://github.com/hexojs/site/edit/master/source/zh-cn/docs/templates.md" class="article-edit-link" title="改进本文"><i class="fa fa-pencil"></i></a>
              </header>
              <div class="article-content" itemprop="articleBody">
                <p>模板决定了网站内容的呈现方式，每个主题至少都应包含一个 <code>index</code> 模板，以下是各页面相对应的模板名称：</p>
<table>
<thead>
<tr>
<th>模板</th>
<th>用途</th>
<th>回调</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>index</code></td>
<td>首页</td>
<td></td>
</tr>
<tr>
<td><code>post</code></td>
<td>文章</td>
<td><code>index</code></td>
</tr>
<tr>
<td><code>page</code></td>
<td>分页</td>
<td><code>index</code></td>
</tr>
<tr>
<td><code>archive</code></td>
<td>归档</td>
<td><code>index</code></td>
</tr>
<tr>
<td><code>category</code></td>
<td>分类归档</td>
<td><code>archive</code></td>
</tr>
<tr>
<td><code>tag</code></td>
<td>标签归档</td>
<td><code>archive</code></td>
</tr>
</tbody>
</table>
<h2 id="布局（Layout）" class="article-heading"><a href="#布局（Layout）" class="headerlink" title="布局（Layout）"></a>布局（Layout）<a class="article-anchor" href="#布局（Layout）" aria-hidden="true"></a></h2><p>如果页面结构类似，例如两个模板都有页首（Header）和页脚（Footer），您可考虑通过「布局」让两个模板共享相同的结构。一个布局文件必须要能显示 <code>body</code> 变量的内容，如此一来模板的内容才会被显示，举例来说：</p>
<figure class="highlight html"><figcaption><span>index.ejs</span></figcaption><table><tr><td class="code"><pre><span class="line">index</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><figcaption><span>layout.ejs</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">body</span> %&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>生成：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span>index<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>每个模板都默认使用 <code>layout</code> 布局，您可在 front-matter 指定其他布局，或是设为 <code>false</code> 来关闭布局功能，您甚至可在布局中再使用其他布局来建立嵌套布局。</p>
<h2 id="局部模版（Partial）" class="article-heading"><a href="#局部模版（Partial）" class="headerlink" title="局部模版（Partial）"></a>局部模版（Partial）<a class="article-anchor" href="#局部模版（Partial）" aria-hidden="true"></a></h2><p>局部模板让您在不同模板之间共享相同的组件，例如页首（Header）、页脚（Footer）或侧边栏（Sidebar）等，可利用局部模板功能分割为个别文件，让维护更加便利。举例来说：</p>
<figure class="highlight html"><figcaption><span>partial/header.ejs</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">"logo"</span>&gt;</span><span class="tag">&lt;<span class="name">%=</span> <span class="attr">config.title</span> %&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><figcaption><span>index.ejs</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%-</span> <span class="attr">partial</span>('<span class="attr">partial</span>/<span class="attr">header</span>') %&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"content"</span>&gt;</span>Home page<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>生成：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">"logo"</span>&gt;</span>My Site<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"content"</span>&gt;</span>Home page<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="局部变量" class="article-heading"><a href="#局部变量" class="headerlink" title="局部变量"></a>局部变量<a class="article-anchor" href="#局部变量" aria-hidden="true"></a></h3><p>您可以在局部模板中指定局部变量并使用。</p>
<figure class="highlight html"><figcaption><span>partial/header.ejs</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">"logo"</span>&gt;</span><span class="tag">&lt;<span class="name">%=</span> <span class="attr">title</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><figcaption><span>index.ejs</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%-</span> <span class="attr">partial</span>('<span class="attr">partial</span>/<span class="attr">header</span>', &#123;<span class="attr">title:</span> '<span class="attr">Hello</span> <span class="attr">World</span>'&#125;) %&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"content"</span>&gt;</span>Home page<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>生成：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">"logo"</span>&gt;</span>Hello World<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"content"</span>&gt;</span>Home page<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="优化" class="article-heading"><a href="#优化" class="headerlink" title="优化"></a>优化<a class="article-anchor" href="#优化" aria-hidden="true"></a></h2><p>如果您的主题太过于复杂，或是需要生成的文件量太过于庞大，可能会大幅降低性能，除了简化主题外，您可以考虑 Hexo 2.7 新增的局部缓存（Fragment Caching） 功能。</p>
<p>本功能借鉴于 <a href="http://guides.rubyonrails.org/caching_with_rails.html#fragment-caching" target="_blank" rel="noopener">Ruby on Rails</a>，它储存局部内容，下次便能直接使用缓存内容，可以减少文件夹查询并使生成速度更快。</p>
<p>它可用于页首、页脚、侧边栏等文件不常变动的位置，举例来说：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;%- fragment_cache(<span class="string">'header'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">'&lt;header&gt;&lt;/header&gt;'</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>如果您使用局部模板的话，可以更简单：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;%- partial(<span class="string">'header'</span>, &#123;&#125;, &#123;<span class="attr">cache</span>: <span class="literal">true</span>&#125;);</span><br></pre></td></tr></table></figure>
<p>但是，如果您开启了 <code>relative_link</code> 参数的话，请勿使用局部缓存功能，因为相对链接在每个页面可能不同。</p>

              </div>
              <footer class="article-footer">
                <time class="article-footer-updated" datetime="2017-12-06T21:52:16.000Z" itemprop="dateModified">上次更新：2017-12-06</time>
                <a href="themes.html" class="article-footer-prev" title="主题"><i class="fa fa-chevron-left"></i><span>上一页</span></a><a href="variables.html" class="article-footer-next" title="变量"><span>下一页</span><i class="fa fa-chevron-right"></i></a>
              </footer>
              
<section id="comments">
  <div id="disqus_thread"></div>
</section>
<script>
  var disqus_shortname = 'hexojs';
  var disqus_url = 'https://hexo.io/zh-cn/docs/templates.html';
  var disqus_title = "模版";
  var disqus_config = function(){
    this.language = 'zh';
  };
  (function(){
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'https://go.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>

            </div>
          </div>
          <aside id="article-toc" role="navigation">
            <div id="article-toc-inner">
              <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=hexoio" id="_carbonads_js"></script>
              <strong class="sidebar-title">目录</strong>
              <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#布局（Layout）"><span class="toc-text"><a href="#&#x5E03;&#x5C40;&#xFF08;Layout&#xFF09;" class="headerlink" title="&#x5E03;&#x5C40;&#xFF08;Layout&#xFF09;"></a>&#x5E03;&#x5C40;&#xFF08;Layout&#xFF09;</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#局部模版（Partial）"><span class="toc-text"><a href="#&#x5C40;&#x90E8;&#x6A21;&#x7248;&#xFF08;Partial&#xFF09;" class="headerlink" title="&#x5C40;&#x90E8;&#x6A21;&#x7248;&#xFF08;Partial&#xFF09;"></a>&#x5C40;&#x90E8;&#x6A21;&#x7248;&#xFF08;Partial&#xFF09;</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#局部变量"><span class="toc-text"><a href="#&#x5C40;&#x90E8;&#x53D8;&#x91CF;" class="headerlink" title="&#x5C40;&#x90E8;&#x53D8;&#x91CF;"></a>&#x5C40;&#x90E8;&#x53D8;&#x91CF;</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#优化"><span class="toc-text"><a href="#&#x4F18;&#x5316;" class="headerlink" title="&#x4F18;&#x5316;"></a>&#x4F18;&#x5316;</span></a></li></ol>
              <a href="#" id="article-toc-top">回到顶部</a>
            </div>
          </aside>
        </div>
      </article>
      <aside id="sidebar" role="navigation">
  <div class="inner">
    <strong class="sidebar-title">开始使用</strong><a href="index.html" class="sidebar-link">概述</a><a href="setup.html" class="sidebar-link">建站</a><a href="configuration.html" class="sidebar-link">配置</a><a href="commands.html" class="sidebar-link">命令</a><a href="migration.html" class="sidebar-link">迁移</a><strong class="sidebar-title">基本操作</strong><a href="writing.html" class="sidebar-link">写作</a><a href="front-matter.html" class="sidebar-link">Front-matter</a><a href="tag-plugins.html" class="sidebar-link">标签插件</a><a href="asset-folders.html" class="sidebar-link">资源文件夹</a><a href="data-files.html" class="sidebar-link">数据文件夹</a><a href="server.html" class="sidebar-link">服务器</a><a href="generating.html" class="sidebar-link">生成器</a><a href="deployment.html" class="sidebar-link">部署</a><strong class="sidebar-title">自定义</strong><a href="permalinks.html" class="sidebar-link">永久链接</a><a href="themes.html" class="sidebar-link">主题</a><a href="templates.html" class="sidebar-link current">模版</a><a href="variables.html" class="sidebar-link">变量</a><a href="helpers.html" class="sidebar-link">辅助函数</a><a href="internationalization.html" class="sidebar-link">国际化 (i18n)</a><a href="plugins.html" class="sidebar-link">插件</a><strong class="sidebar-title">其他</strong><a href="troubleshooting.html" class="sidebar-link">问题解答</a><a href="contributing.html" class="sidebar-link">贡献</a>
  </div>
</aside>
    </div>
  </div>
</div>

    <footer id="footer" class="wrapper">
  <div class="inner">
    <div id="footer-copyright">
      &copy; 2017 <a href="https://github.com/hexojs/hexo/graphs/contributors" target="_blank">Hexo</a><br>
      Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>.
    </div>
    <div id="footer-links">
      <a href="https://twitter.com/hexojs" class="footer-link" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="https://github.com/hexojs/hexo" class="footer-link" target="_blank"><i class="fa fa-github-alt"></i></a>
    </div>
  </div>
</footer>

  </div>
  <div id="mobile-nav-dimmer"></div>
  <nav id="mobile-nav">
  <div id="mobile-nav-inner">
    <ul id="mobile-nav-list">
      <a href="/zh-cn/docs/" class="mobile-nav-link">文档</a><a href="/zh-cn/api/" class="mobile-nav-link">API</a><a href="/news/" class="mobile-nav-link">新闻</a><a href="/plugins/" class="mobile-nav-link">插件</a><a href="/themes/" class="mobile-nav-link">主题</a>
      <li class="mobile-nav-item">
        <a href="https://github.com/hexojs/hexo" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
      </li>
    </ul>
    
      <strong class="mobile-nav-title">开始使用</strong><a href="index.html" class="mobile-nav-link">概述</a><a href="setup.html" class="mobile-nav-link">建站</a><a href="configuration.html" class="mobile-nav-link">配置</a><a href="commands.html" class="mobile-nav-link">命令</a><a href="migration.html" class="mobile-nav-link">迁移</a><strong class="mobile-nav-title">基本操作</strong><a href="writing.html" class="mobile-nav-link">写作</a><a href="front-matter.html" class="mobile-nav-link">Front-matter</a><a href="tag-plugins.html" class="mobile-nav-link">标签插件</a><a href="asset-folders.html" class="mobile-nav-link">资源文件夹</a><a href="data-files.html" class="mobile-nav-link">数据文件夹</a><a href="server.html" class="mobile-nav-link">服务器</a><a href="generating.html" class="mobile-nav-link">生成器</a><a href="deployment.html" class="mobile-nav-link">部署</a><strong class="mobile-nav-title">自定义</strong><a href="permalinks.html" class="mobile-nav-link">永久链接</a><a href="themes.html" class="mobile-nav-link">主题</a><a href="templates.html" class="mobile-nav-link current">模版</a><a href="variables.html" class="mobile-nav-link">变量</a><a href="helpers.html" class="mobile-nav-link">辅助函数</a><a href="internationalization.html" class="mobile-nav-link">国际化 (i18n)</a><a href="plugins.html" class="mobile-nav-link">插件</a><strong class="mobile-nav-title">其他</strong><a href="troubleshooting.html" class="mobile-nav-link">问题解答</a><a href="contributing.html" class="mobile-nav-link">贡献</a>
    
  </div>
  <div id="mobile-lang-select-wrap">
    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>简体中文</span></span>
    <select id="mobile-lang-select" data-canonical="docs/templates.html">
      
        <option value="en">English</option>
      
        <option value="zh-tw">正體中文</option>
      
        <option value="zh-cn" selected>简体中文</option>
      
        <option value="ru">Русский</option>
      
        <option value="ko">한국어</option>
      
    </select>
  </div>
</nav>
  <!-- Scripts -->
<!-- build:js build/js/main.js -->
<script src="/js/lang_select.js"></script>
<script src="/js/toc.js"></script>
<script src="/js/mobile_nav.js"></script>
<!-- endbuild -->

<!-- Algolia -->

<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
<script type="text/javascript">
document.getElementById('search-input-wrap').classList.add('on');
docsearch({
  apiKey: 'cdea7d4e47d84f6145b77e7f68689f35',
  indexName: 'hexo_zh-cn',
  inputSelector: '#search-input'
});
</script>


</body>
</html>